<template>
  <van-collapse-item :title="`会务费用（小计：￥${totalPrice}）`" name="meetingPrice">
    <div class="meeging_price_explain">
      <p>会务费用（线下会）请根据实际发生的费用填写，包含专家餐费、交通费、场地费、物料费。费用结算流程如下</p>
      <p>1：申请会议时填写费用预算金额，同时填写收款方联系方式和收款账号，如填写不完整或填写错误导致费用延期支付，您自行承担延期后果。</p>
      <p>2：会务组根据填写的收款账号及费用信息在2个工作日内，支支付费用。你可以再次进入此页面查看支付结果及电子凭证。</p>
      <p>
        3：开票信息及邮寄地址
        <div>开票信息：北京天正远科技有... <span class="text-primary" @click="clickCopyKPXX">复制完整开票信息</span></div>
        <div>邮寄地址：北京市朝阳区东三... <span class="text-primary" @click="clickCopyYJXX">复制完整邮寄地址</span></div>
      </p>
      <p class="text-danger">
        本次会议固定支出如下（无需填写费用申请）：
        <div>1：财务服务费：{{ getSpeakerList.length }}(讲者数量) X 85.00 = {{ speakerTotalPrice }}</div>
        <div>2：系统会务组服务费：800.00</div>
      </p>
    </div>

    <meeting-price-add ref="refMeetingPriceAdd" @update="meetingPriceUpdate"></meeting-price-add>
  </van-collapse-item>
</template>

<script setup>
import MeetingPriceAdd from './meeting-price-add.vue'
import useClipboard from 'vue-clipboard3'
import { computed, toRefs, ref } from 'vue'
import { showSuccessToast, showToast } from 'vant';
import useUtils from '@/hooks/useUtils'

const { toClipboard } = useClipboard()
const { getPrice } = useUtils();

const props = defineProps({
  speakerList: {
    type: Array,
    default: () => ([])
  }
})
const refMeetingPriceAdd = ref();
const meetingPrice = ([]);

function meetingPriceUpdate (val) {
  meetingPrice.value = val
}
// 获取讲者数量
const getSpeakerList = computed(() => {
  const { speakerList } = toRefs(props);
  return speakerList.value || 0
})
// 计算服务费
const speakerTotalPrice = computed(() => {
  const price = getSpeakerList.value.length * 85
  return getPrice(price);
})
const totalPrice = computed(() => {
  let price = 800
  if (getSpeakerList.value) {
    price += getSpeakerList.value.length * 85;
  }

  (meetingPrice.value || []).forEach(item => {
    if (item.fee) {
      price += Number.parseFloat(item.fee);
    }
  })

  return getPrice(price);
})

// 开票信息复制
const clickCopyKPXX = async () => {
	try {
		await toClipboard(`抬头类型：单位\n
抬头：北京天正远科技有限公司\n
税号：91110105MA00CG4Q4B\n
单位地址：北京市朝阳区朝阳北路145号13号楼（六里屯孵化器5114号）\n
电话号码：18513153165\n
开户银行：工商银行北京分行商务中心区日坛路支行\n
银行账户：0200062909024549110\n
开票类型：普票`)
		showSuccessToast('复制成功')
	} catch (err) {
		showToast('复制失败')
	}
}

// 开票信息复制
const clickCopyYJXX = async () => {
	try {
		await toClipboard(`北京市朝阳区东三环中路39号建外SOHO B座 1805  李珊珊 15133578369`)
		showSuccessToast('复制成功')
	} catch (err) {
		showToast('复制失败')
	}
}

defineExpose({
  getParams: () => {
    const params = refMeetingPriceAdd.value.params
    params.forEach(item => {
      item.invoices = item.invoicesFile.map(item => item.fileId)
      item.shuidan = item.shuidanFile.map(item => item.fileId)
    })
    return params
  },
  setParams (detail) {
    refMeetingPriceAdd.value.setParams(detail)
  }
})
</script>